<template>
    <div>
        <el-button type="text" @click="deptDialogVisible = true">选择</el-button>
        <el-dialog title="选择部门" :visible.sync="deptDialogVisible" width="50%" 
        :append-to-body="true" :close-on-click-modal="false">
            <el-cascader-panel v-model="dept" ref="deptCascader" :options="options" :props="{ value: 'id', label: 'name', checkStrictly: true }"></el-cascader-panel>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="change">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { completeDept } from "@/api/dept";
import { editDorm, addDorm, delDorm } from "@/api/dorm";
import { deepClone } from "@/utils";
import { getPosition, getDept } from "@/api/basic";
export default {
  props: {
    id: {
      default: 0
    }
  },
  data() {
    return {
      deptDialogVisible: false,
      options: [],
      dept:[]
    };
  },
  watch: {
    id(old, val) {
      completeDept({ id: this.id }).then(res => {
        this.dept = res.data
      });
    }
  },
  created() {
    
    this.getDepts();
  },
  mounted() {
    completeDept({ id: this.id }).then(res => {
      this.dept = res.data
    });
  },
  beforeDestroy() {},
  methods: {
    async getDepts() {
      const res = await getDept();
      this.options = res.data;
    },
    change(){
        this.$emit('check',this.$refs["deptCascader"].getCheckedNodes()[0])
        this.deptDialogVisible = false
    }
  }
};
</script>
  